<template>
	<view>
		<picker :range="array" :range-key="'cname'" :value="p_value" @change="change1"  @columnchange="columnChange" mode="multiSelector">
			<view style="display: flex; justify-content: space-between;">
				<view v-if="form.province_name || form.city_name">{{form.province_name}}--{{form.city_name}}</view>
				<view v-else style="font-size: 36rpx; color:#BFBFBF;">请选择地区</view>
				<view style="color: #3291F8; font-size: 34rpx;">选择</view>
			</view>
		</picker>
	</view>
</template>

<script>
	export default {
		props: {
			p_id: {
				type: [String, Number],
				default: 0
			},
			c_id: {
				type: [String, Number],
				default: 0
			},
		},
		watch: {
		    p_id(newName, oldName) {
				// console.log('watch p_id:')
				// console.log(newName)
				// console.log(oldName)
				this.init()
		    },
			c_id(newName, oldName) {
			    // console.log(newName)
				this.init()
			},
		},
		data() {
			return {
				txt: '请选择所在地区',
				array:[
					[{'id':0,'cname':'请选择'}],
					[{'id':0,'cname':'请选择'}]
				],
				p_value:[0,0],
				form:{'province_name':'','city_name':''},
			}
		},
		created() {
			this.init()
		},
		methods: {
			init(){
				// console.log("area.vue")
				// console.log(this.p_id)
				// console.log(this.c_id)
				// console.log("onLoad")
				var that=this
				var res='';
				var res2='';
				var that=this
				if(this.p_id!=0){
					this.get("/index/Index/get_area_name_by_id",{'id':this.p_id}).then(function(res){
						// console.log("res_fff:")
						// console.log(res.code);
						// console.log(res.data)
						// console.log(res.tip)
						that.form.province_name=res.data.name
						// console.log(that.p_value[0])
						//that.p_value[0]=that.p_id
					})
				}
				if(this.c_id!=0){
					this.get("/index/Index/get_area_name_by_id",{'id':this.c_id}).then(function(res){
						// console.log(res);
						that.form.city_name=res.data.name
						/*
						that.get("/index/Index/get_equle_by_id",{'id':that.c_id}).then(function(res2){
							that.array[1]=res2.data;
							that.p_value=that.c_id;
						})
						*/
					})
				}
				this.getAddress();
				this.back_fuc()
			},
			change1(e){
				// console.log("change1:",e)
			},
			back_fuc(){
				var arr={}
				arr.c_id=this.c_id
				arr.p_id=this.p_id
				// console.log("arr:",arr)
				this.$emit("back_func_op",arr)
			},
			async getAddress(e) {
				const res = await this.get('/index/Index/get_province')
				res.data.forEach((item,i) => {
					this.array[0].push(item)
				})
			},
			columnChange(e) {
				// console.log("e:",e);
				if(e.detail.column==0){
					var n=e.detail.value;
					this.p_value[0]=n
					var p_id=this.array[0][n].id;
					this.p_id=p_id
					this.get_city_by_p_id(p_id);
					this.p_value[1]=0
					this.c_id=''
					this.form.province_name=this.array[0][n].cname
				}else if(e.detail.column==1){
					var nn=e.detail.value;
					this.p_value[1]=nn
					var c_id=this.array[1][nn].id
					this.c_id=c_id
					this.form.city_name=this.array[1][nn].cname
				}
				this.back_fuc();
				// console.log(this.p_value)
				// console.log("c_id:",this.c_id)
			},
			get_city_by_p_id(p_id){
				var that=this	
				this.get("/index/Index/get_city_by_p_id",{"p_id":p_id}).then(function(res){
					// console.log("res:",res)
					//删除除了0以外的数据
					that.array[1].splice(1,that.array[1].length);
					res.data.forEach(function(item,i){
						//that.$set(that.array[1],i,item)
						that.array[1].push(item)
					})
				})
			},
		}
	}
</script>

<style>

</style>
